<template>
    <div :style="{ height: height, width: width }" />
</template>

<script>
import echarts from 'echarts'
import request from '@/utils/request'

export default {
    props: {
        width: {
            type: String,
            default: '80%',
        },
        height: {
            type: String,
            default: '25vh',
        },
        chartTitle: {
          type: String,
          default: '',
          required: true,
        },
        chartData: {
            type: Array,
            default: () => [],
            required: true,
        },
    },
    data() {
        return {
            chart: null,
        }
    },
    watch: {
        chartData: {
            deep: true,
            handler(val) {
                this.setOptions(val)
            },
        },
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
            this.setOptions()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$el)
        },
        setOptions(data) {
            let _self = this
            this.chart = echarts.init(this.$el)
            this.chart.setOption({
                title: {
                    text: _self.chartTitle,
                    textStyle: {
                        color: '#DDD', // 标题文字颜色设置为 #AAA
                    },
                },
                tooltip: {
                    // 设置提示框组件
                    trigger: 'axis', // 鼠标悬停时触发提示框
                    axisPointer: {
                        // 坐标轴指示器配置项
                        type: 'shadow', // 阴影指示器，显示柱状图的阴影区域
                    },
                    formatter: function (params) {
                        // 使用 formatter 自定义提示框内容
                        var value = params[0].value
                        return _self.chartTitle + '：' + value
                    },
                },
                xAxis: {
                    splitArea: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    type: 'category',
                    data: ['磋商前', '磋商后'],
                    axisLabel: {
                        color: '#DDD', // x轴文本颜色设置为灰色
                    },
                },
                yAxis: {
                    splitLine: {
                        show: false,
                    },
                    splitArea: {
                        show: false,
                    },
                    type: 'value',
                    axisLabel: {
                        color: '#DDD', // x轴文本颜色设置为灰色
                    },
                },
                series: [
                    {
                        data: data,
                        type: 'bar',
                        barWidth: '40%', // 设置柱状图的宽度为原来的 40%
                        itemStyle: {
                            normal: {
                                color: '#337dff', // 设置柱状图颜色为#337dff
                            },
                        },
                    },
                ],
            })
        },
        componentResize() {
            setTimeout(() => {
                this.chart.resize()
            }, 800)
        },
    },
}
</script>
